{include file="common/_header"}
{include file="common/_header1"}
<style>
    .layui-form {
        display: flex;
        flex-direction: column;
        width: 700px;
        padding: 10px 20px 0 0;
        margin: 20px auto;
    }

    .layui-form input[readonly] {
        background-color: #fff !important;
    }

    .layui-form-label {
        width: auto;
    }

    .layui-form-select dl dd.layui-this,
    .layui-laydate .layui-this {
        background-color: #459cfc !important;
    }

    .layui-form-checkbox i {
        height: 30px;
    }

    .layui-form-switch i {
        top: 2px;
    }

    .layui-form-radio * {
        font-size: 22px;
    }

    .layui-form-radio:hover *,
    .layui-form-radioed,
    .layui-form-radioed>i {
        color: #6faed9;
    }

    .layui-upload-list {
        display: inline;
    }

    .layui-upload-img {
        max-width: 200px;
        border: 0 !important;
        border-radius: 10px;
    }

    .label-c {
        display: flex;
        justify-content: center;
        text-align: center;
        margin: 0 auto 50px;
    }

    .label-c label {
        font-size: 30px;
        font-weight: 500;
    }
</style>
<style>
    /* 设置起止时间选择只展示时分，隐藏秒那一列 */
    .laydate-time-list {
        padding-bottom: 0;
        overflow: hidden;
    }

    .laydate-time-list > li {
        width: 50% !important;
    }

    .laydate-time-list > li:last-child {
        display: none;
    }

    .laydate-time-list ol li {
        width: 100% !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
</style>
<body class="no-skin">
<div class="main-container" id="main-container">
<!--    <div class="col-md-6">-->
    <div class="">
        <form class="layui-form" method="post" action="">
            <div class="layui-form-item">
                <input type="hidden" name="handle" value="save1" />
                <input type="hidden" name="state" value="1" />
            </div>
            <div class="layui-form-item label-c">
                <label class="layui-form-label">店铺基本信息</label>
            </div>
            <!--                <div class="layui-form-item label-c">-->
            <!--                    <label class="layui-form-label" style="color:red">该部分信息需要审核</label>-->
            <!--                </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">店铺名称</label>
                <div class="layui-input-block">
                    <input type="text" name="shopname" required lay-verify="required" placeholder="请输入店铺名称" autocomplete="off" class="layui-input" value="{$data.info['shop_name']}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">店长</label>
                <div class="layui-input-block">
                    <input type="text" name="shopmanager" required lay-verify="required" placeholder="请输入店长名称" autocomplete="off" class="layui-input" value="{$data.info['shop_manager']}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话号码</label>
                <div class="layui-input-block">
                    <input type="text" name="shopphone" required lay-verify="required" placeholder="请输入店铺电话号码" autocomplete="off" class="layui-input" value="{$data.info['shop_phone']}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" required lay-verify="required" placeholder="请输入详细地址" autocomplete="off" class="layui-input" value="{$data.info['address']}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">可提前天数</label>
                <div class="layui-input-block">
                    <input type="text" name="ahead_days" required lay-verify="required" placeholder="请输入天数" autocomplete="off" class="layui-input" value="{$data.info['ahead_days']}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">起送份数</label>
                <div class="layui-input-block">
                    <input type="text" name="mini_number" required lay-verify="required" placeholder="请输入份数" autocomplete="off" class="layui-input" value="{$data.info['mini_number']}">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">店铺公告</label>
                <div class="layui-input-block">
<!--                    <textarea name="notice_text" placeholder="店铺公告" rows="10" class="layui-textarea"> {$data.info['notice_text']}</textarea>-->
                    <textarea class="layui-textarea" required placeholder="请输内容"
                              name="notice_text" lay-verify="content"
                              id="lay_edit2" style="border: 2px;">{$data.info['notice_text']}</textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">店铺简介</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="店铺简介" required lay-verify="required" rows="10" class="layui-textarea"> {$data.info['remark']}</textarea>
                </div>
            </div>

            <div class="layui-form-item time_ranges">
                <div class="layui-inline-block all_items">
                    <label class="layui-form-label">营业时间</label>
                    {if !empty($data.info['time_range']) }
                    {volist name="data.info['time_range']" id="val"}
                    <div class="layui-inline-block time-item" style="float:left;">
                        <label class="layui-form-label">{if $key == 0}午餐{else /}晚餐{/if}</label>
                        <input lay-verify="required" type="text" name="time_range[]" class="layui-input time_range" style="width:120px;display:inline-block;" placeholder=" - " value="{$val}">
                    </div>
                    {/volist}
                    {else /}
                    <div class="layui-input-block time-item">
                        <input lay-verify="required" type="text" name="time_range[]" class="layui-input time_range" style="width:120px;display:inline-block;" placeholder=" - ">
                    </div>
                    {/if}
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <div class="wine_div3">
                    <label class="layui-form-label">店铺封面图：</label>
                    <button type="button" class="layui-btn" id="test1">上传图片</button><br>
                    <div class="layui-input-block layui-upload-list2">
                        <p id="demoText1"></p>
                        <img class="layui-upload-img" id="demo1" width="100px" height="100px" src="/{$data.info.imagesurl}" style="margin-right:5px;">
                        <input type="hidden" name="imagesurl" class="image1" value="{$data.info.imagesurl}"  lay-verify="required">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <div class="wine_div3">
                    <label class="layui-form-label">客服二维码：</label>
                    <button type="button" class="layui-btn" id="test2">上传图片</button><br>
                    <div class="layui-input-block layui-upload-list2">
                        <p id="demoText2"></p>
                        <img class="layui-upload-img" id="demo2" width="100px" height="100px" src="/{$data.info.kefu_image}" style="margin-right:5px;">
                        <input type="hidden" name="kefu_image" class="image2" value="{$data.info.kefu_image}"  lay-verify="required">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-lg ajsubmit" lay-submit lay-filter="formDemo" style="width: 200px; background-color: #6faed9;margin-top: 30px;">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/static/admin/lib/layui/layui2.js" charset="utf-8"></script>
<script type="text/javascript">
    // layui.use(['form', 'upload', 'layarea', 'laydate', 'element', 'layer'], function () {
    layui.use(['form', 'upload', 'laydate', 'element', 'layer', 'layedit'], function () {
        var form = layui.form
            // , layarea = layui.layarea
            , laydate = layui.laydate
        var upload = layui.upload;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/shops/shopinfo?handle=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code === 1){
                    $('.image1').attr('value', res.data);
                    return layer.msg('上传成功');
                }else{
                    return layer.msg(res.msg,{icon: 2});
                }
                //上传成功的一些操作
                $('#demoText1').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText1');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        //常规使用 - 普通图片上传
        var uploadInst2 = upload.render({
            elem: '#test2'
            , url: '/shops/shopinfo?handle=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo2').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code === 1){
                    $('.image2').attr('value', res.data);
                    return layer.msg('上传成功');
                }else{
                    return layer.msg(res.msg,{icon: 2});
                }
                //上传成功的一些操作
                $('#demoText2').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText2');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        //监听提交
        form.on('submit(formDemo)', function (data) {
            console.log(data.field);
            $.ajax({
                url: 'shopinfo',
                type: 'post',
                async:false,
                dataType: 'json',
                data: data.field,
                success: function (data) {
                    // console.log(data);
                    if(data.code != 0){
                        layer.msg(data.msg, {
                            icon: 6,
                            time: 500,
                        }, function () {
                            window.location.reload();
                        })
                    } else {
                        // console.log(345);
                        layer.msg(data.msg, {
                            icon: 5,
                            time: 500,
                        }, function () {
                        })
                    }
                },
                error: function(data){
                    console.log(data);
                    console.log(111);
                }
            })
        });
        // layarea.render({
        //     elem: '#area-picker',
        //     change: function (res) {
        //         // 选择结果res
        //     }
        // });
        //时间范围
        laydate.render({
            elem: '.time_range'
            ,type: 'time'
            ,range: true
            ,format: 'HH:mm'
            ,ready: function (date) {
                var dom = $(".laydate-time-list").children("li");
                //i=选择控件中时分秒顺序，
                //比如这里是时间范围选择，需要选择两段时分秒，所以i=6，
                //秒选择部分被隐藏了，但实际还是存在
                //所以i = 1或i = 4分别对应两个分钟选择器
                for (var i = 0; i < dom.length; i++) {
                    var li = $(dom[i]).children("ol").children("li")
                    if (i == 1 || i == 4) {
                        for (var j = 0; j < li.length; j++) {
                            if ($(li[j]).text() != '00' && $(li[j]).text() != '30') {
                                $(li[j]).remove();
                            }
                        }
                    }
                }
            },
        });
        var layedit = layui.layedit;
        // var up_url = "{:url('/main/ueditor')}";


        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            // uploadImage: {
            //     url: up_url //接口url
            //     , type: 'post' //默认post
            //     , accept: 'image'
            //     , acceptMime: 'image/*'
            //     , exts: 'jpg|png|gif|bmp|jpeg'
            // },
             devmode: true
            //插入代码设置
            , codeConfig: {
                hide: true,  //是否显示编码语言选择框
                default: 'javascript' //hide为true时的默认语言格式
            }
            , tool: [
                'strong' //加粗
                , 'italic' //斜体
                , 'underline' //下划线
                , 'del' //删除线

                , '|' //分割线

                , 'left' //左对齐
                , 'center' //居中对齐
                , 'right' //右对齐

            ]
            , height: 300, //设置编辑器高度
        });

        layedit.build('lay_edit2', {
            width: 200,
            height: 300, //设置编辑器高度
            tool: [
                'strong' //加粗
                , 'italic' //斜体
                , 'underline' //下划线
                , 'del' //删除线

                , '|' //分割线

                , 'left' //左对齐
                , 'center' //居中对齐
                , 'right' //右对齐

            ]
        });   //建立编辑器

        //提交时把值同步到文本域中
        form.verify({
            //content富文本域中的lay-verify值
            content: function (value) {
                return layedit.sync(index);
            }
        });
    });
</script>
<script>
    jQuery(function($) {
        $(".time_ranges").on('click', '.add_item', function () {
            addItem();
        });
    });
    var index = 1
    function addItem(){
        let formGroup =
            '<div class="layui-input-block time-item">'+
            '<input lay-verify="required" type="text" name="time_range[]" class="layui-input time_range'+index+'" style="width:120px;display:inline-block;" placeholder=" - ">\n' +
            '<button class="layui-btn add_item" style="display:inline-block;width: 80px; background-color: #6faed9">添加</button>\n' +
            '<button class="layui-btn del_item" style="display:inline-block;width: 80px; background-color: red" onclick="delItem(this)">删除</button>' +
            '</div>'
        $(".time_ranges").children(".all_items").append(formGroup);
        layui.laydate.render({
            elem: '.time_range'+index
            ,type: 'time',trigger: 'click'
            ,range: true
            ,format: 'HH:mm'
        });
        index++
    }
    function delItem(ele){
        ele = $(ele);
        // console.log(ele);
        ele.parents(".time-item").remove();
    }
</script>
</body>
{include file="common/_bottom"}